import React, {Component} from "react"
import datamobx from "*/mobx/data"
import {observer} from "mobx-react"
import {axios} from "&/axios"
import {
    Button,
    Table,
    Tag,
    Modal
}from "antd";
import {DeleteOutlined,EditOutlined,EyeOutlined} from "@ant-design/icons"
import moment  from "moment"
moment.locale("zh-cn"); 
const rollList = ["普通用户","管理员","超级管理员"];
const color =  ["orange","blue","red"];
@observer
 class AdviseList extends Component{
     state={
         item:null,
         delFlag:false,
        columns:[
            {
                title:"序号",
                render:(text,recode,index)=>{
                    return index+1;
                }
            },
            {
                title:"提议人",
                render:(text)=>{
                    return <Tag color="success" >{text.userinfo.username} </Tag>
                }
            },
            {
                title:"角色",
                render:(text)=>{
                return <Tag color={color[text.userinfo.rolltype-1]}> {rollList[text.userinfo.rolltype-1]}</Tag>
                }
            },
            {
                title:"意见标题",
                dataIndex: 'title',
                key: 'title', 
            },
            {
                title:"意见分类",
                render:(text)=>{
                    return text.category.map(item=><Tag color="success" key={item}> {item}</Tag>)
                }

            },
            {
                title:"时间",
                render:(text)=>{
                return <p>{moment(text.time).format('MM/DD,HH:mm:ss')}</p>
                }
            },
            {
                title:"操作",
                render:(text)=>{
                    var users={}
                    if(sessionStorage.users){
                        users=JSON.parse(sessionStorage.users)
                    }
                    return(
                        <div>
                            <Button disabled={users.mobile!=text.mobile} onClick={()=>this.handleModify(text)} size="small" type="primary" shape="circle"  icon={<EditOutlined />}></Button>
                            &nbsp;&nbsp;
                            <Button onClick={()=>this.handlePreview(text)} size="small" type="primary" shape="circle"  icon={<EyeOutlined />}></Button>
                            &nbsp;&nbsp;
                            <Button disabled={(users.rolltype<=text.userinfo.rolltype)&&(users.mobile!=text.mobile)} onClick={()=>this.handleDetail(text)} size="small" type="danger" shape="circle"  icon={<DeleteOutlined />}></Button>
                        </div>

                    )
                }
            }
        ]
     }
     
     componentDidMount(){
         let from=new URLSearchParams(this.props.location.search).get("from")
         if(!datamobx.adviselist||from){
             axios.post("/api/getadviselist")
             .then(res=>{
                 datamobx.getAdviseListSync(res.data.result)
             })
         }
     }
    handleGoToCreate=()=>{
        this.props.history.push("/main/advise/create")
    }
    handleModify=(item)=>{ 
        this.props.history.push("/main/advise/update/"+item._id)
    }
    handlePreview=(item)=>{
        this.props.history.push("/main/advise/preview/"+item._id)

    }
    handleDetail=(item)=>{
        this.setState({
            delFlag:true,
            item
        })
    }
    handleHide=()=>{
        this.setState({
            delFlag:false,
        })
    }
    handleDelAdvise=()=>{
        axios.post("/api/deladviseone",{
            _id:this.state.item._id
        }).then(res=>{
            if(res.data.type){
                var adviselist=datamobx.adviselist.filter(item=>item._id!=this.state.item._id);
                datamobx.getAdviseListSync(adviselist)
            }
            this.handleHide();
        })
    }
    render(){
        return (
            <div>
                <h2> 社区意见总览 - 你的每一次建议都将让社区变得更加美好   </h2>
                <Button type="primary" style={{marginTop:20}} onClick={this.handleGoToCreate}> 添加个人意见</Button>
                <Table
                    dataSource={datamobx.adviselist}
                    columns={this.state.columns}
                    rowKey={
                        (item)=>(item._id)
                    }
                    style={{marginTop:20}}
                    pagination={{pageSize:6}}
                >
                </Table>
                <Modal
                    title="删除提示"
                    visible={this.state.delFlag}
                    onOk={this.handleDelAdvise}
                    onCancel={this.handleHide}
                    okText="确认"
                    cancelText="取消"
                >
                    <p>你确定要删除这条意见吗...</p>
                </Modal>
            </div>
        )
    }
}
export default AdviseList